<template>
  <div>
    <div class="banner" @click="handleShowGallery">
      <img :src="bannerImg" alt="" class="banner__img" />
      <div class="banner__info">
        <div class="banner__info__title">{{ sightName }}</div>
        <div class="banner__info__number">
          <span class="iconfont banner__info__number__icon">&#xe6df;</span
          >{{ getImgLength }}
        </div>
      </div>
    </div>
    <common-gallery
      v-show="showGallery"
      @close="handleGalleryClose"
      :imgs="gallaryImgs"
    ></common-gallery>
  </div>
</template>
<script>
import CommonGallery from "../../common/Gallery/Gallery.vue";
export default {
  name: "DetailBanner",
  components: {
    CommonGallery,
  },
  props: {
    sightName: String,
    bannerImg: String,
    gallaryImgs: Array,
  },
  data() {
    return {
      showGallery: false,
    };
  },
  computed: {
    getImgLength() {
      return this.gallaryImgs.length;
    },
  },
  methods: {
    handleShowGallery() {
      this.showGallery = true;
    },
    handleGalleryClose() {
      this.showGallery = false;
    },
  },
};
</script>
<style lang="scss" scoped>
.banner {
  position: relative;
  overflow: hidden;
  height: 0;
  padding-bottom: 55%;
  &__img {
    width: 100%;
  }
  &__info {
    display: flex;
    position: absolute;
    height: 0.64rem;
    line-height: 0.64rem;
    left: 0;
    right: 0;
    bottom: 0;
    color: #fff;
    background-image: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0),
      rgba(0, 0, 0, 0.8)
    );
    &__title {
      flex: 1;
      padding: 0 0.2rem;
    }
    &__number {
      height: 0.32rem;
      line-height: 0.32rem;
      margin-top: 0.2rem;
      padding: 0 0.4rem;
      font-size: 0.24rem;
      border-radius: 0.2rem;
      background: rgba(0, 0, 0, 0.5);
      &__icon {
        font-size: 0.24rem;
      }
    }
  }
}
</style>